<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- 移动端设置禁止缩放,否则width及height的高度严重失真 -->
	<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
	<title>border:变形</title>
	<style>
		body{background:#FD9927; }
		.content{
			width:80%;
			height:400px;
			margin:50px auto;
			background:#FFD6A8;
			border:3px solid #FF4116;
			box-sizing: border-box;
			position:relative;
		}
		.box{
			width:0;
			border:20px solid transparent;
			position:absolute;
			opacity:0.3;
		}
		.left{
			border-top-color: #FD9927;
			border-left-color:#FD9927;
			top:0;left:0;
		}
		.right{
			border-right-color:#FD9927;
			border-bottom-color:#FD9927;
			right:0;bottom:0;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="div">
			<div class="box left"></div>
			<div class="box right"></div>
		</div>
	</div>
</body>
</html>